<template>
  <div class="home">
    这是首页
   <span v-if="user == null">
      <a href="javascript:void(0);" v-on:click="log()">登录</a>
      <a href="javascript:void(0);" @click="reg()" >注册</a>
   </span>
    <span v-else>
      欢迎:{{user.nickname}}
       <a href="javascript:void(0);" @click="logout()" >退出登录</a>
   </span>
    <el-row :gutter="20">

      <el-col :span="16" :offset="4">
        <el-row :gutter="10">
          <el-col :span="4">
            <el-card></el-card>
          </el-col>
          <el-col :span="14">
            <el-card style="font-size:18px;margin-bottom: 10px;" v-for="(item,index) in weiboArr">
              <h2>{{item.nickname}}:</h2>
              <p>{{item.content}}</p>
              <p>{{item.content}}</p>
              <p style="font-size: 14px;color: #666;">发布的时间:{{item.created}}</p>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card></el-card>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script>

export default {
  data() {
    return {
      /*获取本地存储的数据*/
      user: localStorage.user?JSON.parse(localStorage.user):null,
      weiboArr:[]
    }
  },
  methods: {
    log() {
      this.$router.push("/login")
    },
    reg(){
      this.$router.push("/reg")
    },
    logout(){
      localStorage.clear()
      this.user = null
      location.reload()
    }

  },
  mounted() {
    let url = this.BASE_URL + '/v1/weibo/list'
    this.axios.get(url).then(response=>{
      console.log(response)
      if(response.data.code == 10001){
        this.weiboArr = response.data.data
      }
    })
  }

}
</script>

<style>
 .home{font-size: 10px;}
 span{float: right;}
 p,h2{
   padding:  0;
   margin: 0;
   margin-bottom: 5px;
 }
</style>
